<template>
    <div class="bg loginPage">
        <div>
            <div>
                <div class="hello">                         </div>
            </div>
            <!-- <div class="logoBox">
                <img
                    class="logoBox"
                    src="@/assets/images/login/logo.jpg"
                    alt=""
                />
            </div> -->
        </div>

        <div v-if="!isRegister" class="loginBox">
            <div class="Title">智慧体测记录算分系统</div>
            <div class="welcomeLogin">welcome login</div>
            <el-form ref="formRef" :model="formData" label-width="0px">
                <el-form-item
                    prop="email"
                    :rules="{ required: true, message: '输入邮箱账号' }"
                >
                    <div class="formLabel">账户</div>
                    <el-input
                        class="inputStyle"
                        v-model="formData.email"
                        placeholder="Enter account"
                    ></el-input>
                </el-form-item>
                <el-form-item
                    prop="password"
                    :rules="{ required: true, message: '请输入密码' }"
                >
                    <div class="formLabel">密码</div>
                    <el-input
                        placeholder="Enter password"
                        v-model="formData.password"
                        :type="showPassword ? 'text' : 'password'"
                    >
                    </el-input>
                </el-form-item>
            </el-form>

            <el-radio v-model="radio" label="1">学生</el-radio>
            <el-radio v-model="radio" label="0">管理员</el-radio>
            <el-button :class="buttonClass" type="primary" @click="login">{{
                buttonText
            }}</el-button>
            <!-- <div class="register-link" @click="toggleForm">
                No account, go register
            </div> -->
        </div>

        <div v-else class="loginBox">
            <div class="Title">Register</div>
            <el-form ref="registerFormRef" :model="registerFormData" label-width="0px">
                <el-form-item
                    prop="email"
                    :rules="{ required: true, message: 'Enter account' }"
                >
                    <div class="formLabel">Email</div>
                    <el-input
                        class="inputStyle"
                        v-model="registerFormData.email"
                        placeholder="Enter account"
                    ></el-input>
                </el-form-item>
                <el-form-item
                    prop="password"
                    :rules="{ required: true, message: 'Enter password' }"
                >
                    <div class="formLabel">Password</div>
                    <el-input
                        placeholder="Enter password"
                        v-model="registerFormData.password"
                        :type="showPassword ? 'text' : 'password'"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item
                    prop="confirmPassword"
                    :rules="{ required: true, message: 'Confirm password' }"
                >
                    <div class="formLabel">Confirm Password</div>
                    <el-input
                        placeholder="Confirm password"
                        v-model="registerFormData.confirmPassword"
                        :type="showPassword ? 'text' : 'password'"
                    >
                    </el-input>
                </el-form-item>
            </el-form>
            <el-button style="background-color: black;" type="primary" @click="register">{{
                registerButtonText
            }}</el-button>
            <div class="register-link" @click="toggleForm">
                Already have an account? Go to login
            </div>
        </div>
    </div>
</template>

<script>
// import { api_login } from "@/APIs/login.js";
import Cookies from 'js-cookie';
export default {
    data() {
        return {
            radio: '1',
            showPassword: false,
            formData: {},
            registerFormData: {
                email: '',
                password: '',
                confirmPassword: ''
            },
            isRegister: false
        }
    },
    mounted() {},
    computed: {
        buttonClass() {
            return this.radio == '1' ? 'emailLoginBtn' : 'loginBtn'
        },
        buttonText() {
            return this.radio == '1' ? '登入' : '进入管理页面'
        },
        registerButtonText() {
            return 'Register'
        }
    },
    methods: {
        switchPassword() {
            this.showPassword = !this.showPassword
        },
        gotoIndex() {
            this.$router.push('/')
        },
        login() {
            this.formData.roles = this.radio == '1' ? 'user' : 'admin'
            this.formData.avatar =
                'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif'
            this.$store
                .dispatch('user/login', this.formData)
                .then(() => {
                    Cookies.set('roles', JSON.stringify(this.formData.roles), { expires: 7 });
                    this.$router.push({ path: this.redirect || '/' })
                    this.loading = false
                })
                .catch(() => {
                    this.loading = false
                })
        },
        onCancel() {
            this.$message({
                message: 'cancel!',
                type: 'warning'
            })
        },
        toggleForm() {
            this.isRegister = !this.isRegister;
        },
        register() {
            // Your registration logic here
        }
    }
}
</script>

<style scoped>
.input_icon {
    cursor: pointer;
    width: 24px;
    padding-top: 8px;
    padding-right: 6px;
}

.bg {
    background-image: url('~@/assets/images/login/loginbg.jpg');
    background-size: 100% 100%;
    position: fixed;
    top: 0px;
    width: 100%;
    height: 100%;
}

.loginBox {
    width: 390px;
    height: 550px;
    background: #ffffff;
    padding: 40px;
    box-sizing: border-box;
}
.loginPage {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0px 90px;
    box-sizing: border-box;
}
.logoBox {
    width: 639px;
    height: 441px;
}
.hello {
    height: 63px;
    font-size: 45px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    color: #46bdd5;
    line-height: 63px;
}
.hello2 {
    height: 44px;
    font-size: 32px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    color: #ffffff;
    line-height: 44px;
    margin-bottom: 46px;
    margin-top: 12px;
}

.welcomeLogin {
    height: 25px;
    font-size: 18px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    color: #2b2d31;
    line-height: 25px;
    text-align: center;
    margin-bottom: 26px;
}
.Title {
    height: 25px;
    font-size: 25px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    color: #2b2d31;
    line-height: 25px;
    text-align: center;
}
.formLabel {
    margin-top: 20px;
    height: 21px;
    font-size: 15px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #2b2d31;
    line-height: 21px;
    margin-bottom: 10px;
}

.loginBtn {
    height: 51px;
    background: #3e6ff6;
    border-radius: 6px;
    width: 100%;
    margin-top: 30px;
}
.emailLoginBtn {
    height: 51px;
    background: #0a0f1c;
    border-radius: 6px;
    width: 100%;
    margin-top: 50px;
}
.inputStyle {
    width: 100%;
}
.register-link {
    cursor: pointer;
    color: blue;
    text-decoration: underline;
    margin-top: 10px;
}
</style>
